<template>
  <div>
    <div class="info-count">
      <i class="el-icon-remove-outline"  v-if="foodNum !== 0"
         @click="removeCart(food.category_id, food.item_id, food.specfoods[0].food_id)"></i>
<!--      <p class="number" v-if="foodNum !== 0">{{ foodNum }}</p>-->
      <p class="number" v-if="foodNum !== 0">{{foodNum}}</p>
      <i class="el-icon-circle-plus-outline"  v-if="foodNum !== 0"
         @click="addCart(
           food.category_id,food.item_id,food.specfoods[0].food_id,food.image_path,
           food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,
           food.specfoods[0].sku_id,food.specfoods[0].stock,$event)"></i>
      <i class="el-icon-circle-plus"  v-if="foodNum === 0"
         @click="addCart(
           food.category_id,food.item_id,food.specfoods[0].food_id,food.image_path,
           food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,
           food.specfoods[0].sku_id,food.specfoods[0].stock,$event)"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {Ifoods} from "@/api/config/responseType";
import {Mutation, State} from "vuex-class";
const namespace = "profile"
@Component({})
export default class buyCartCom extends Vue {
  @Prop() food !: Ifoods;
  @Prop() restaurant_id !: number;
  @State('cartList',{ namespace }) cartList !: any;
  @Mutation('ADD_CART', { namespace }) ADD_CART: any
  @Mutation('REDUCE_CART', { namespace }) REDUCE_CART: any
  private foodNum = 0 as number
  mounted(){
    try{
      this.foodNum = this.cartList[this.restaurant_id][this.food.category_id][this.food.item_id][this.food.specfoods[0].food_id]['num'];
    }catch {
      this.foodNum = 0;
    }
    // this.sendstudentname()
  }
  // sendstudentname(){
  //   //@ts-ignore
  //   this.$bus.$emit('hello',this.name)
  // }
  /**
   * @description: 添加购物车操作
   * @return {}
   */
  addCart(category_id:number, item_id: number, food_id:number,food_img:string, name: string, price:number, specs: string, packing_fee:number, sku_id: number, stock:number , event:any){
    this.foodNum++;
    this.ADD_CART({restaurant_id: this.restaurant_id, category_id, item_id, food_id, food_img,name, price, specs, packing_fee, sku_id, stock});
    // let elLeft = event.target.getBoundingClientRect().left;
    // let elBottom = event.target.getBoundingClientRect().bottom;
    // this.showMoveDot.push(true);
    // this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
  }
  /**
   * @description: 移除购物车操作
   * @return {}
   */
  removeCart(category_id:number, item_id: number, food_id:number){
    // if (this.foodNum > 0) {
    // console.log({category_id, item_id, food_id})
    this.foodNum--;
    this.REDUCE_CART({restaurant_id:this.restaurant_id,category_id, item_id, food_id});
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .info-count {
    text-align: center;
    display: inline-flex;
    align-items: center;
    .el-icon-remove-outline {
      color: #55b5f7;
      font-size: 2em;
    }
    .el-icon-circle-plus-outline {
      font-size: 2em;
      color: #55b5f7;
    }
    .el-icon-circle-plus {
      font-size: 2em;
      color: #55b5f7;
    }
    .number {
      color: #55b5f7;
      margin: 0 6px;
      font-size: 1em;
    }
  }
</style>
